<template>
  <a-modal
    title="新增项目"
    :width="800"
    :visible="visible"
    :confirmLoading="loading"
    @ok="() => { $emit('ok') }"
    @cancel="() => { $emit('cancel') }">
    <a-spin :spinning="loading">
      <a-form
        :form="form"
        v-bind="formLayout">
        <a-row :gutter="24">
          <a-col :span="12" v-show="false">
            <a-form-item label="projectId">
              <a-input v-decorator="['projectId']" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="创建时间">
              <a-date-picker valueFormat="YYYY-MM-DD hh:mm:ss" v-decorator="['createTime']" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="计划交付时间">
              <a-date-picker valueFormat="YYYY-MM-DD hh:mm:ss" v-decorator="['completeTime']" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="项目类型">
              <a-select
                v-decorator="['projectTypeId',{ rules: [{ required: true, message: '请选择项目类型' }] }]"
                placeholder="请选择项目类型">
                <a-select-option
                  v-for="i in projectTypes"
                  :key="i.projectTypeId"
                  :value="Number(i.projectTypeId)">
                  {{ i.projectType }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <div style="top: 0px;left: 330px;position: absolute;">
              <div title="刷新" @click="() => { $emit('resetProjectTypes') }" >
                <a-icon style="cursor: pointer" type="undo" />
              </div>
              <div title="新增" @click="addProjectType" >
                <a-icon style="cursor: pointer" type="plus" />
              </div>
            </div>
          </a-col>
          <a-col :span="12">
            <a-form-item label="业务员">
              <!-- <a-input placeholder="请输入业务员" v-decorator="['salesName', { rules: [{ required: true, message: '请填写业务员姓名' }] }]" /> -->
              <a-select
                show-search
                :filter-option="filterOption"
                v-decorator="['salesId',{ rules: [{ required: true, message: '请填写业务员姓名' }] }]"
                placeholder="请输入业务员">
                <a-select-option
                  v-for="i in staffs"
                  :key="i.userId">
                  {{ i.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <!-- salesName -->
          <a-col :span="12">
            <a-form-item label="项目名称">
              <a-input placeholder="请输入项目名称" v-decorator="['projectName', { rules: [{ required: true, message: '请填写项目名称' }] }]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="客户">
              <a-select
                show-search
                :filter-option="filterOption"
                v-decorator="['customerId',{ rules: [{ required: true, message: '请选择客户' }] }]"
                placeholder="请选择客户">
                <a-select-option
                  v-for="i in customers"
                  :key="i.customerId"
                  :value="i.customerId">
                  {{ i.companyName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="负责人">
              <a-select
                show-search
                :filter-option="filterOption"
                v-decorator="['managerId',{ rules: [{ required: true, message: '请选择负责人' }] }]"
                placeholder="请选择负责人">
                <a-select-option
                  v-for="i in staffs"
                  :key="i.userId">
                  {{ i.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="项目状态">
              <a-select
                show-search
                :filter-option="filterOption"
                v-decorator="['status',{ rules: [{ required: true, message: '请选择项目状态' }] }]"
                placeholder="请选择项目状态">
                <a-select-option :value="1">跟单中</a-select-option>
                <a-select-option :value="2">丢单</a-select-option>
                <a-select-option :value="3">进行中</a-select-option>
                <a-select-option :value="4">完成</a-select-option>
                <a-select-option :value="5">终止</a-select-option>
                <a-select-option :value="6">暂停</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>

// 表单字段
const fields = ['id', 'createDate', 'projectName', 'projectType', 'completeDate', 'customer', 'staff']

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    isAdd: {
      type: Boolean,
      default: () => false
    },
    projectTypes: {
      type: Array,
      required: true
    },
    staffs: {
      type: Array,
      default: () => []
    },
    customers: {
      type: Array,
      default: () => []
    }
  },
  data () {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      }
    }
    return {
      form: this.$form.createForm(this)
    }
  },
  created () {
    console.log('')

    // 防止表单未注册
    fields.forEach(v => this.form.getFieldDecorator(v))
  },
  methods: {
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    addProjectType () {
      const _url = window.location.href.split('#')
      window.open(`${_url[0]}#/project/projectTypeList`)
    }
  }
}
</script>
